<template>
	<view class="container">
		<!-- <view class="top_title">
			<view class="name" :class="selectItem=='emo'?'active_name':''" @click="selectOne('emo',1)">
				情感天地
			</view>
			<view class="name" :class="selectItem=='look'?'active_name':''" @click="selectOne('look',2)">
				寻人寻物
			</view>
		</view> -->
		<view class="emotion_list" v-for= "(item,index) in list" :key="index">
			<view class="name_part">
				<image :src="item.avatar?  item.avatar:'../../static/img/detailInfo/detailavatar.png'" mode=""></image>
				<view class="age">
					<view class="">
						{{item.name}}
					</view>
					<view class="add_age">
						{{item.city}} /{{item.age}}岁
					</view>
				</view>
			</view>
			<view class="detail_content">
                {{item.content}}
			</view>
			<view class="detail_content_img" @click="detial(item.id)">
					<image v-for="(img,index) in item.image" :key="index" :src="img" mode=""></image>
			</view>
			<view class="upload_part">
				<view class="time">
					{{item.createTime}}
				</view>
				<view class="img_status">
					<view class="" @click="showForward(item)">
						<image src="../../static/img/detailInfo/zhuan.png" mode=""></image>
					</view>
					<view class="weixin" @click="thumbsup(index,item.id,item.fine)">
						<image src="../../static/img/detailInfo/zan.png" mode=""></image>
						<view class="weixin_num" v-if="item.hadFines>0">
							{{item.hadFines}}
						</view>
					</view>
					<view class="weixin" @click="detial(item.id)">
						<image src="../../static/img/detailInfo/weixin.png" mode=""></image>
						<view class="weixin_num" v-if="item.replyCount>0">
							{{item.replyCount}}
						</view>
					</view>
				</view>
			</view>
 
		
		</view>
		<view class='release' @click="publish()">
			<image src="../../static/img/myCenter/pub_ico.png" mode=""></image>
		</view>
		<view>
				<uni-load-more :status="status"  :content-text="contentText" color="#007aff"  />
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog title="" :content="forwardText" :before-close="true" @close="close" @confirm="forward"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				forwardText:'是否确定转发',
				forwardObj:{},
				list: [
				],
				selectItem:"emo",
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				page:1,
				pageSize:20,
				maxlength:0,
				type:1,
			}
		},
		onLoad(options) {
			this.selectItem = options.selectItem
			this.type = options.type
			uni.setNavigationBarTitle({
				title:this.type == 1 ? '情感天地':'寻人寻物'
			})
			this.getdynamicList()
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			// uni.startPullDownRefresh();
		},
		// 下拉刷新
		onPullDownRefresh() {
			// console.log('refresh');
			this.page = 1
			this.getdynamicList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom() {
			let _self = this
			this.status = 'loading'
			uni.showNavigationBarLoading()
			this.page ++
			this.getdynamicList()
			console.log('reach');
			setTimeout(function() {
				if(_self.list.length >= _self.maxlength ){
					_self.status = 'noMore'
					// console.log(_self.list.length)
					uni.hideNavigationBarLoading()
				}else{
					_self.status = 'more'
					uni.hideNavigationBarLoading()
				}
				
			}, 2000);
		},
		methods: {
			close(done) {
				done()
			},
			showForward(item){
				this.forwardObj = item
				this.forwardText = '是否确定转发'+item.name+'发布的【' + item.content+ '】'
				this.$refs.popup.open()
			},
			forward(){ //转发
				this.$utils.requert({url:'dynamic',data:{
					content: this.forwardObj.content,
					image: this.forwardObj.image,
					type: this.forwardObj.type
				},type:'post'}).then(res=>{
					if(res.code === 1 ){
						this.page = 1
						this.getdynamicList()
						this.$utils.showLayer('转发成功')
					}else{    
						this.$utils.showLayer(res.message)
					}
					this.$refs.popup.close()
				})
			},
			thumbsup(index,id,fine){ //点赞
				this.$utils.requert({url:'fineEdit',data:{fineId:id},type:'post'}).then(res=>{
					if(res.code === 1 ){
						if(fine == 1) {
							this.list[index].hadFines = this.list[index].hadFines - 1
							this.$utils.showLayer('取消点赞')
							this.list[index].fine = 0
						}else {
							this.list[index].hadFines = this.list[index].hadFines + 1
							this.$utils.showLayer('点赞成功')
							this.list[index].fine = 1
						}
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			getdynamicList(){
				let data = {
					page:this.page,
					pageSize:this.pageSize,
					type:this.type
				}
				this.$utils.requert({url:'dynamicList',data:data,type:'post'}).then(res=>{
						if(res.code === 1 ){
							let datas = res.data.data
							datas.forEach((element)=>{
								element.createTime = this.$utils.happenTimeFun(element.createTime)
							})
							if(this.page == 1){
								this.list = []
								this.list.push(...datas) 
							}
							 this.list.push(...datas) 
							// console.log(this.list)
							
							this.maxlength = res.data.total
						}else{    
							this.$utils.showLayer(res.message)
						}
					})
			},
			detial(id){
				uni.navigateTo({
					url:'/pages/detailInfo/detailInfo?id='+id
				})
			},
			selectOne(value,type){
				this.selectItem=value;
				this.type = type
				this.page = 1
				uni.setNavigationBarTitle({
					title:this.type == 1 ? '情感天地':'寻人寻物'
				})
				this.getdynamicList()
			},
			//发布说说
			publish(){
				uni.navigateTo({
					url:'/pages/shareNewInfo/shareNewInfo?type='+this.type
				})
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 98%;
		height: 100%;
		margin: 0 auto;
	}

	.name_part {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 38rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.name_part image {
		width: 110rpx;
		height: 110rpx;
		margin-right: 16rpx;
		border-radius: 50%;
	}

	.name_part .age {
		font-size: 32rpx;
		color: #363636;
	}

	.name_part .age .add_age {
		font-size: 24rpx;
		color: #A3A2A2;
	}

	.detail_content {
		font-size: 28rpx;
		color: #363636;
		margin-bottom: 20rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.detail_content_img {
		display: flex;
		flex-wrap: wrap;
		color: 477rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.detail_content_img image {
		width: 310rpx;
		color: 477rpx;
		/* margin: 10rpx; */
	}

	.upload_part {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 36rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.upload_part .time {
		font-size: 24rpx;
		color: #A3A2A2;
	}

	.upload_part .img_status {
		display: flex;
	}

	.upload_part .img_status image {
		width: 34rpx;
		height: 34rpx;
		margin-left: 55rpx;
	}

	.upload_part .img_status .weixin {
		position: relative;
	}

	.upload_part .img_status .weixin .weixin_num {
		position: absolute;
		right: -12rpx;
		top: -8rpx;
		font-size: 16rpx;
		color: #969696;
	}
	.emotion_list{
		border-bottom: 1rpx solid #f6f6f6;
	}
	.release{
		position: fixed;
		right: 40rpx;
		bottom: 150rpx;
	}
	.release image{
		width: 130rpx;
		height: 130rpx;
	}
	.typelist{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
	}
	.typelist text{
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	.top_title{
		display: flex;
		margin-top: 18rpx;
		margin-left: 25rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f6f6f6;
		align-items: baseline;
	}
	.top_title .name{
		margin-right: 30rpx;
		font-size: 28rpx;
		color: #333333;	
	}
	.top_title .active_name{
		font-size: 34rpx;
		color: #FB8408;
	}
</style>
